<template>
  <el-dialog
    :visible.sync="openConditionDialog"
    :fullscreen="true"
    :show-close="false">
    <div style="
          border-bottom: 1px solid rgb(232,232,232);
          position: absolute;
          top: 0; left: 0;
          height: 70px; width: 100%;
          line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">{{ title }}</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openConditionDialog = false"></el-button>
      </div>

    </div>

    <div style="margin: 40px 40px 70px 40px;">
      <el-card class="box-card" style="margin-bottom: 20px;" v-show="conditionList.length > 0">
        <div slot="header" class="clearfix">
          <span>{{ title }}</span>
        </div>

        <span>成功条件——例：${success>=nrOfInstances/2}</span>
        <el-input v-model="success" placeholder="请输入表达式"></el-input>

        <span style="margin-top: 10px; display: block;">失败条件——例：${error>=nrOfInstances/2}</span>
        <el-input v-model="error" placeholder="请输入表达式"></el-input>

        <span style="margin-top: 10px; display: block;">可用参数</span>
        <el-tag v-for="(condition, index) in conditionList" :key="index" style="margin-right: 10px;">
          {{ condition.documentation + ': ' + condition.condition }}
        </el-tag>
      </el-card>
    </div>

    <div style="background-color: white;
        border-top: 1px solid rgb(232,232,232);
        position: absolute;
        bottom: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <div style="float:right; margin: 17px;">
        <el-button type="primary" style="float: right" @click.native="handleProcessInstance()">提交</el-button>
        <el-button plain style="float: right; margin-right: 20px;" @click="openConditionDialog = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: "condition",
  data(){
    return {
      openConditionDialog: false,
      title: '',
      property: null,
      propertyName: null,
      conditionList: [],
      commandStack: null,
      element: null,

      success: '',
      error: ''
    }
  },
  methods: {
    handleProcessInstance(){
      if(this.commandStack && this.element && this.property){
        let value = this.success + ";" + this.error
        const element = this.element
        this.commandStack.execute('element.updateModdleProperties', {
          element,
          moddleElement: this.property,
          properties: {
            value
          }
        });
        this.openConditionDialog = false
      }
    }
  }
}
</script>

<style scoped>

</style>
